// src/router/index.jsx - 更新的认证路由配置
import { Routes, Route, Navigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import ProtectedRoute from '../components/ProtectedRoute'

// 认证页面（不需要登录）
import Login from '../containers/Login'
import Register from '../containers/Register'

// 保护页面（需要登录）
import Home from '../containers/Home'
import InterviewPrep from '../containers/InterviewPrep'
import IdentityVerify from '../containers/IdentityVerify'
import InterviewRoom from '../containers/InterviewRoom'
import InterviewResult from '../containers/InterviewResult'

const AppRouter = () => {
  const { isAuthenticated, loading } = useAuth()

  // 如果正在加载用户信息，显示加载界面
  if (loading) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        color: 'white'
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{
            width: '60px',
            height: '60px',
            border: '4px solid rgba(255, 255, 255, 0.3)',
            borderTop: '4px solid white',
            borderRadius: '50%',
            animation: 'spin 1s linear infinite',
            margin: '0 auto 1rem'
          }}></div>
          <h2>正在初始化系统...</h2>
          <p>请稍候</p>
          <style>{`
            @keyframes spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }
          `}</style>
        </div>
      </div>
    )
  }

  return (
    <Routes>
      {/* 根路径重定向 */}
      <Route 
        path="/" 
        element={
          isAuthenticated() ? 
          <Navigate to="/home" replace /> : 
          <Navigate to="/login" replace />
        } 
      />
      
      {/* 认证相关路由（公开访问） */}
      <Route 
        path="/login" 
        element={
          isAuthenticated() ? 
          <Navigate to="/home" replace /> : 
          <Login />
        } 
      />
      <Route 
        path="/register" 
        element={
          isAuthenticated() ? 
          <Navigate to="/home" replace /> : 
          <Register />
        } 
      />
      
      {/* 保护路由（需要登录） */}
      <Route 
        path="/home" 
        element={
          <ProtectedRoute>
            <Home />
          </ProtectedRoute>
        } 
      />
      
      <Route 
        path="/prep" 
        element={
          <ProtectedRoute>
            <InterviewPrep />
          </ProtectedRoute>
        } 
      />
      
      <Route 
        path="/verify/:sessionId" 
        element={
          <ProtectedRoute>
            <IdentityVerify />
          </ProtectedRoute>
        } 
      />
      
      <Route 
        path="/interview/:sessionId" 
        element={
          <ProtectedRoute>
            <InterviewRoom />
          </ProtectedRoute>
        } 
      />
      
      <Route 
        path="/result/:sessionId" 
        element={
          <ProtectedRoute>
            <InterviewResult />
          </ProtectedRoute>
        } 
      />
      
      {/* 404页面 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

// 404页面组件
const NotFound = () => {
  const { isAuthenticated } = useAuth()
  
  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      color: 'white',
      textAlign: 'center',
      padding: '2rem'
    }}>
      <h1 style={{ fontSize: '4rem', margin: '0 0 1rem 0' }}>404</h1>
      <h2 style={{ fontSize: '1.5rem', margin: '0 0 1rem 0' }}>页面未找到</h2>
      <p style={{ margin: '0 0 2rem 0', opacity: 0.8 }}>
        抱歉，您访问的页面不存在
      </p>
      <a 
        href={isAuthenticated() ? "/home" : "/login"}
        style={{
          background: 'rgba(255, 255, 255, 0.2)',
          color: 'white',
          textDecoration: 'none',
          padding: '1rem 2rem',
          borderRadius: '12px',
          border: '1px solid rgba(255, 255, 255, 0.3)',
          transition: 'all 0.3s ease'
        }}
        onMouseOver={(e) => {
          e.target.style.background = 'rgba(255, 255, 255, 0.3)'
        }}
        onMouseOut={(e) => {
          e.target.style.background = 'rgba(255, 255, 255, 0.2)'
        }}
      >
        {isAuthenticated() ? '返回首页' : '返回登录'}
      </a>
    </div>
  )
}

export default AppRouter